<template>
  <div>
    我是Demo组件
    <p id="pp">{{msg}}</p>
    <button @click="msg ='hellowrod'">点我修改msg</button>
  </div>
</template>

<script>
export default {
  name: 'VueModeDemo',

  data() {
    return {
      msg:'你好世界'
    };
  },
  // 初始化前  //undefined
  beforeCreate(){
    console.log('beforeCreate',this.msg);
  },
  // 初始化后 
  created(){
    console.log('created',this.msg);
  },
  // DOM渲染前  //null
  beforeMount(){
    const p =document.querySelector('#pp')
    console.log('beforeMount', p);
  },
  // DOM渲染后 
  mounted(){
    const p =document.querySelector('#pp')
    console.log('mounted',p);
  },
  // 数据变化后 dom 更新前 
  beforeUpdate(){
    const p=document.querySelector('#pp')
     console.log('beforeUpdate',p.innerHTML);
  },
  //dom 更新后
  updated(){
      const p =document.querySelector('#pp')
      console.log('updated',p.innerHTML);
  },
  //销毁阶段前
  beforeDestroy(){
     console.log('beforDestroy');
  },
  //销毁阶段前
  destroyed(){
    console.log('destroyed');
  },
  methods:{
    //生命周期钩子会自动执行，不要写到methods里面，语法层里面不报错，但不会自动执行
  }
}
</script>

<style lang="scss" scoped>

</style>